<!-- @format -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>demo</title>
</head>
<body>
<script src="flv.min.js"></script>
<table>
    <tr>
        <td>
            <label>通道号</label>
            <input id="videochannel" type="text" width="400px" value="1001"/>
            <button type="button" onclick="play(document.getElementById('videochannel').value)">Play</button>
        </td>
    </tr>
    <tr>
        <td>
            <video style="height: 300px;width: 400px" muted="muted" id="videoElement"></video>
        </td>
    </tr>
</table>

<script>
    function flvLoad(flvPlayer, url, elementId) {
        if(flvPlayer){
            flvPlayer.destroy()
        }
        let videoElement = document.getElementById(elementId);
        flvPlayer = flvjs.createPlayer({
            type: 'flv',
            url: url,
        });
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        setTimeout(()=> {
            flvPlayer.play()
        }, 500);
    }

    let flvPlayer
    function play(channel){
        flvLoad(flvPlayer,window.location.origin + '/jiangwei/flv/' + channel, 'videoElement')
    }

</script>
</body>
</html>